<template>
	<view>
		<scroll-view :scroll-y="true" class="scrollContent" :enhanced="true" :bounces="false" :show-scrollbar="false">
			<view class="goods_list">
				<z-paging ref="paging" v-model="listData" @query="queryPageSearchByPlatformApp">
					<template #top>
						<view id="searchBox">
							<view style="background-color: #46ebb0;padding: 20rpx;">
								<view style="width: 100%;display: flex;align-items: center;justify-content: space-between;">
									<view style="width: 100%">
										<u-search v-model="search" @custom="searchfun" @search="searchfun" @clear="clearSearch"
											:show-action="true" action-text="搜索" :animation="false" shape="round"
											search-icon="search"></u-search>
									</view>
									<view @click="distype==0?distype=1:distype=0">
										<!-- <image :src="'/static/img/goods/dis'+distype+'.png'" style="width: 45rpx;" mode="widthFix"></image> -->
									</view>
								</view>
							</view>

							<u-tabs :current="tabCurrent" :list="tabList" @click="tabClick" :scrollable="true" lineWidth="30"
								lineColor="#80B999" :activeStyle="{color: '#303133',fontWeight: 'bold',transform: 'scale(1.05)'}"
								:inactiveStyle="{color: '#606266',transform: 'scale(1)'}"></u-tabs>
						</view>
					</template>

					<block v-if="distype==0">
						<view class="d-flex j-sb flex-wrap p10">
							<view v-for="(item,index) in listData" :key="index" class="mybox mb15">
								<image :src="item.headUrl1.split('&')[0]" mode="aspectFill" class="box_img"></image>
								<view class="d-flex flex-column j-sa p10 box_info">
									<view class="name">{{item.productName}}</view>
									<view class="price f_family_din">¥{{item.productPrice}}</view>
								</view>
								<view class="d-flex a-center j-center">
									<view class="xfBtn" @click="addCarPage(item)">消费</view>
								</view>
							</view>
						</view>
					</block>

					<block v-else>
						<view class="hlbblock Myshadow mb10" style="padding: 20rpx" v-for="(item,index) in listData" :key="index">
							<view style="display: flex;width: 100%;">
								<view class="mr20">
									<image :src="item.headUrl1.split('&')[0]" style="width: 200rpx;height: 190rpx;border-radius: 15rpx"
										mode="aspectFill"></image>
								</view>
								<view class="pt10 pb10 d-flex flex-column j-sb">
									<view style="font-size: 32rpx;color: #33333;font-weight: 500;">
										<view class="linedot">
											{{item.productName}}
										</view>
									</view>
									<view style="display: flex;justify-content: space-between;height: 55rpx;align-items: baseline">
										<view style="color: #333333">
											<text style="font-size: 40rpx;color: #33333;font-weight: 500;">¥{{item. productPrice}}</text>
										</view>
									</view>
								</view>
							</view>
						</view>
					</block>
				</z-paging>

				<edwinTime ref="chooseTime" title="请选择预约时间" @change="changeTime()"></edwinTime>
			</view>
		</scroll-view>
	</view>
</template>

<script>
	import edwinTime from '@/components/edwin-time/edwin-time.vue';
	import {
		queryPageSearchByPlatformApp,
		updateShopCarPlatformApp
	} from "@/api/index.js"

	export default {
		components: {
			edwinTime
		},
		data() {
			return {
				orderCode: "",
				productCode: "",
				reserveDate: "",
				/*底部加载*/
				loading: true,
				/*没有更多*/
				no_more: false,
				/*类别选中*/
				type_active: 0,
				/*价格选中*/
				price_top: false,
				sale_top: false,
				tabList: [{
					name: '豪华车',
				}, {
					name: '家政服务'
				}, {
					name: '奢侈品',
				}, {
					name: '私餐'
				}, {
					name: '高端游'
				}, {
					name: '车辆租赁'
				}, {
					name: '其他商品'
				}],
				tabCurrent: 0,
				/*商品列表*/
				listData: [],
				/*当前页面*/
				page: 1,
				category_id: 0,
				search: '',
				sortType: '',
				sortPrice: 0,
				sortsale: 0,
				list_rows: 10,
				last_page: 0,
				distype: 0,
				pricesort: '',
				salesort: '',
			};
		},
		computed: {
			/*加载中状态*/
			loadingType() {
				if (this.loading) {
					return 1;
				} else {
					if (this.listData.length != 0 && this.no_more) {
						return 2;
					} else {
						return 0;
					}
				}
			}
		},

		onLoad(opt) {
			console.log(opt);
			if (opt.orderCode) {
				this.orderCode = opt.orderCode
			}

			if (opt.index) {
				this.tabCurrent = opt.index
			}

			if (opt.search_value) {
				this.search = opt.search_value;
			}
		},
		mounted() {
			/*获取产品列表*/
			// this.queryPageSearchByApp()
		},
		onPullDownRefresh() {
			/*下拉到顶，页面值还原初始化*/
			// 	this.queryPageSearchByApp()

			// 	setTimeout(function() {
			// 		uni.stopPullDownRefresh();
			// 	}, 1500);
		},
		methods: {
			queryPageSearchByPlatformApp(pageNo, pageSize) {
				uni.showLoading({
					title: '加载中',
					mask: true
				});
				queryPageSearchByPlatformApp({
					pageIndex: pageNo,
					pageSize: pageSize,
					productType: this.tabCurrent,
					productName: this.search
				}).then(res => {
					// this.listData = res.object.data
					this.$refs.paging.complete(res.object.data)
					uni.hideLoading()
				})
			},
			searchfun() {
				this.$refs.paging.reload()
			},
			clearSearch(val) {
				// this.queryPageSearchByApp()
				this.$refs.paging.reload()
			},

			tabClick(data) {
				this.tabCurrent = data.index
				this.$refs.paging.reload()
			},


			addCarPage(data) {
				this.productCode = data.productCode
				if (data.productType == 1) {
					this.openDatetime()
				} else {
					this.updateShopCarPlatformApp()
				}
			},

			// 打开时间组件
			openDatetime() {
				this.$refs.chooseTime.open()
			},

			// 选择的时间
			changeTime(e) {
				this.reserveDate = e.value
				this.updateShopCarPlatformApp()
			},

			updateShopCarPlatformApp() {
				const that = this
				uni.showLoading({
					title: '加载中',
					mask: true
				});
				updateShopCarPlatformApp({
					productCode: that.productCode,
					orderCode: that.orderCode,
					reserveDate: that.reserveDate,
					stock: '1',
				}).then(res => {
					uni.hideLoading()
					uni.navigateBack({
						delta: 1
					})
				})
			},

			/*类别切换*/
			tabTypeFunc(e) {
				return
				let self = this;
				self.listData = [];
				self.page = 1;
				self.no_more = false;
				self.loading = true;
				if (e == 2) {
					self.price_top = !this.price_top;
					if (self.price_top == true) {
						self.sortPrice = 0;
						self.pricesort = 'up';
					} else {
						self.sortPrice = 1;
						self.pricesort = 'down';
					}
					self.salesort = '';
					self.sortType = 'price';
				}

				self.type_active = e;
				// self.getData();
			},


			/*可滚动视图区域到底触发*/
			scrolltolowerFunc() {
				let self = this;
				self.bottomRefresh = true;
				self.page++;
				self.loading = true;
				if (self.page > self.last_page) {
					self.loading = false;
					self.no_more = true;
					return;
				}
			},

			goBack() {
				uni.navigateBack({
					delta: 2
				});
			}
		}
	};
</script>

<style lang="scss" scoped>
	image {
		display: inline-block;
	}

	.scrollContent {
		//可视高度，需要在多大的盒子中进行滑动
		height: 100vh;
		width: 100%;
	}

	.goods_list {
		font-family: Source Han Sans CN, Source Han Sans CN-500 !important;
		background: linear-gradient(179deg, #46ebb0 30%, #ffffff 80%);
		min-height: 100vh;
	}

	.Myshadow {
		background-color: #ffffff;
		// box-shadow: 0px 0px 10px 0px rgba(0, 0, 0, 0.10);
	}


	.mybox {
		height: 620rpx;
		width: 344rpx;
		box-sizing: border-box;
		background: #ffffff;
		box-shadow: 0px 0px 10px 0px rgba(0, 0, 0, 0.10);
		border-radius: 12rpx;
		overflow: hidden;

		.box_img {
			display: inline-block;
			height: 344rpx;
			width: 344rpx;
		}

		.box_info {
			height: 166rpx;
			// width: 344rpx;

			.name {
				color: #333333;
				font-size: 28rpx;
				font-family: Source Han Sans CN, Source Han Sans CN-500;
				font-weight: 500;
				line-height: 48rpx;
			}

			.price {
				color: #333333;
				font-size: 40rpx;
				font-family: Source Han Sans CN, Source Han Sans CN-500;
				font-weight: 500;
			}
		}

		.xfBtn {
			width: 132px;
			height: 50rpx;
			background: #38d19a;
			border-radius: 34px;
			color: #ffffff;
			font-size: 26rpx;
			text-align: center;
			line-height: 50rpx;
		}
	}
</style>